<template>
	<view :style="{ '--color': vuex_config.adminTheme, '--price': vuex_config.adminPrice }">
		<view class="search"><u-search @search="search" @clear="search" clearabled :show-action="false" shape="square" height="64" v-model="searchName"></u-search></view>
		<u-tabs :active-color="vuex_config.adminTheme" :inactive-color="vuex_config.adminTheme" :list="tabList" :current="current" @change="change"></u-tabs>
		<view class="order_list">
			<view class="order_item" v-for="(item, index) in dataList" :key="index">
				<view class="title_main" @click="openDetail(item)">
					<view class="title_l">
						<view class="sign"></view>
						<view class="order_no">订单编码：{{ item.order_no }}</view>
					</view>
					<view class="title_state">{{ statusFilter(item, 1) }}</view>
				</view>
				<view class="cont_main">
					<view class="order_cont" @click="openDetail(item)">
						<view class="basic_item">
							<view class="basic_l">联系人：</view>
							<view class="basic_r">{{ item.name }}</view>
						</view>
						<view class="basic_item">
							<view class="basic_l">手机号：</view>
							<view class="basic_r">{{ item.mobile }}</view>
						</view>
						<view class="basic_item">
							<view class="basic_l">收货地址：</view>
							<view class="basic_r">{{ item.address }}</view>
						</view>
						<view class="basic_item">
							<view class="basic_l">下单时间：</view>
							<view class="basic_r">{{ item.date_creation | formTime() }}</view>
						</view>
					</view>
					<view class="bot_main">
						<view class="sum_box">
							<view class="sum sum_l">共{{ item.num }}件商品</view>
							<view class="sum">合计：</view>
							<view class="num">￥{{ item.total_amount }}</view>
						</view>
						<view class="btn_s">
							<view class="btn" v-if="item.pay_status == 1" @click="openRefund(item)">退款申请</view>
							<view class="btn" v-if="checkBtn(item, 2)" @click="goDeliver(item)">{{ item.pay_status == 1 ? '订单发货' : '修改发货' }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<sww-load-more :params="dataListParams"></sww-load-more>
		<u-modal v-model="show" :show-cancel-button="true" title="申请退款" @confirm="confirmRefund">
			<view class="refund-box">
				<u-field v-model="refundForm.money" label="退款金额" placeholder="请输入退款金额"></u-field>
				<view class="u-font-24 tip">
					注:最多可退款
					<text class="price">{{ currentOrderItem.total_amount }}</text>
					元
				</view>
				<u-field v-model="refundForm.content" label="备注信息" placeholder="请输入备注信息"></u-field>
			</view>
		</u-modal>
	</view>
</template>

<script>
import { orderjs } from './order.js';
import { pagingMixin } from '@/mixins/sysPaging.js';
export default {
	mixins: [pagingMixin, orderjs],
	data() {
		return {
			init: false,
			searchName: '',
			tabList: [
				{
					name: '全部',
					type: null
				},
				{
					name: '待发货',
					type: 1
				},
				{
					name: '已发货',
					type: 4
				},
				{
					name: '退款中',
					type: 2
				},
				{
					name: '已完成',
					type: 10
				}
			],
			current: 1
		};
	},
	onLoad() {
		this.$loading();
		this.initPage();
	},
	onShow() {
		if (this.init) {
			this.initPage();
		} else {
			this.init = true;
		}
	},
	onReachBottom() {
		this._load_data();
	},
	onPullDownRefresh() {
		this.initPage();
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 700);
	},
	methods: {
		change(index) {
			this.current = index;
			this.initPage();
		},
		initPage() {
			let params = {
				pk_id: this.vuex_business.pk_id,
				type: 1,
				name: this.searchName,
				pay_status: this.tabList[this.current].type
			};
			this._init_data('orderAllList', params);
		},
		search() {
			this.initPage();
		},
		openDetail(item) {
			this.$linkTo(`/package/system/order/orderDetail?order_no=${item.order_no}&order_id=${item.pk_id}`);
		}
	}
};
</script>
<style lang="scss">
page {
	background-color: $www-theme-bg;
}
</style>
<style scoped lang="scss">
.search {
	padding: 16rpx 30rpx;
	border-top: 1px solid #f5f5f5;
	border-bottom: 1px solid #f5f5f5;
	background-color: #fff;
}

/deep/ .u-scroll-box {
	display: flex;
}
/deep/.u-model__title {
	padding: 20rpx 0 !important;
	border-bottom: 1px solid #eeeeee;
}
.refund-box {
	.tip {
		padding: 20rpx 0;
		margin-left: 160rpx;
		color: #999;
	}
	.price {
		color: var(--price);
	}
}
.order_list {
	padding-bottom: 20rpx;
}

.order_item {
	margin: 20rpx 20rpx 0;
	overflow: hidden;
	border-radius: 10rpx;
	background-color: #fff;

	.title_main {
		display: flex;
		height: 80rpx;
		align-items: center;
		padding-right: 22rpx;

		.title_l {
			flex: 1;
			overflow: hidden;
			display: flex;
			align-items: center;

			.sign {
				width: 10rpx;
				height: 28rpx;
				margin-right: 10rpx;
				background-color: var(--color);
			}

			.order_no {
				font-weight: bold;
				color: #222;
				font-size: 30rpx;
			}
		}

		.title_state {
			color: var(--color);
		}
	}

	.cont_main {
		padding: 0 20rpx;

		.order_cont {
			border-top: 1px solid #f5f5f5;
			border-bottom: 1px solid #f5f5f5;
			padding: 20rpx 0 6rpx;
		}
	}

	.basic_item {
		margin-bottom: 16rpx;
		display: flex;
		line-height: 36rpx;

		.basic_r {
			flex: 1;
			overflow: hidden;
		}
	}

	.bot_main {
		display: flex;
		align-items: center;
		height: 96rpx;

		.sum_box {
			flex: 1;
			overflow: hidden;
			display: flex;
			align-items: center;

			.sum {
				color: #999999;
				font-size: 28rpx;
			}

			.sum_l {
				margin-right: 20rpx;
			}

			.num {
				flex: 1;
				overflow: hidden;
				white-space: nowrap;
				color: var(--price);
			}
		}

		.btn_s {
			display: flex;
			align-items: center;

			.btn {
				border: var(--color);
				color: var(--color);
				margin-right: 14rpx;
				line-height: 46rpx;
				width: 140rpx;
				text-align: center;
				border: 1px solid var(--color);
				border-radius: 8rpx;
				overflow: hidden;
				font-size: 28rpx;

				&:last-of-type {
					margin-right: 0;
					background-color: var(--color);
					color: #fff;
				}
			}
		}
	}
}
</style>
